<template>
  <div>
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :quota="quota"
      :quota-used="quotaUsed"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      goods: {
        picture:
          "http://localhost:3000/img/详情页/details/lbs1.jpg",
      },
      goodsId: "",
      quota: 99,
      quotaUsed: 0,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "火烈鸟", // skuValueName：规格值名称
              },
              {
                id: "2",
                name: "手绘火烈鸟",
              },
              {
                id: "3",
                name: "卡其冰淇淋",
              },
              {
                id: "4",
                name: "蓝色冰淇淋",
              },
            ], //  是否展示大图模式
          },
          {
            k: "尺寸", // skuKeyName：规格类目名称
            k_s: "s2", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "200*200", // skuValueName：规格值名称
              },
              {
                id: "2",
                name: "140*150",
              },
              {
                id: "3",
                name: "300*300",
              },
              {
                id: "4",
                name: "100*150无手提",
              },
               {
                id: "5",
                name: "50*50",
              },
              {
                id: "6",
                name: "150*200",
              },
            ], //  是否展示大图模式
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
            {
            id: 4001, // skuId
            s1: "4", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 88*100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 4002, // skuId
            s1: "4", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "2", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 58*100, // 价格（单位分）
            stock_num: 130, // 当前 sku 组合对应的库存
          },
           {
            id: 4003, // skuId
            s1: "4", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "3", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 158*100, // 价格（单位分）
            stock_num: 148, // 当前 sku 组合对应的库存
          },
           {
            id:4004, // skuId
            s1: "4", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "4", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 38*100, // 价格（单位分）
            stock_num: 130, // 当前 sku 组合对应的库存
          },
           {
            id:4005, // skuId
            s1: "4", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "5", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 38*100, // 价格（单位分）
            stock_num: 130, // 当前 sku 组合对应的库存
          },
          {
            id:4006, // skuId
            s1: "4", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "6", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 68*100, // 价格（单位分）
            stock_num: 130, // 当前 sku 组合对应的库存
          },
            {
            id: 3001, // skuId
            s1: "3", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 88*100, // 价格（单位分）
            stock_num:100, // 当前 sku 组合对应的库存
          },
          {
            id: 3002, // skuId
            s1: "3", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "2", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 58*100, // 价格（单位分）
            stock_num: 130, // 当前 sku 组合对应的库存
          },
           {
            id: 3003, // skuId
            s1: "3", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "3", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 158*100, // 价格（单位分）
            stock_num: 148, // 当前 sku 组合对应的库存
          },
           {
            id:3004, // skuId
            s1: "3", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "4", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 38*100, // 价格（单位分）
            stock_num: 130, // 当前 sku 组合对应的库存
          },
           {
            id:3005, // skuId
            s1: "3", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "5", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 38*100, // 价格（单位分）
            stock_num: 130, // 当前 sku 组合对应的库存
          },
          {
            id:3006, // skuId
            s1: "3", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "6", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 68*100, // 价格（单位分）
            stock_num: 130, // 当前 sku 组合对应的库存
          },

            {
            id: 2001, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 88*100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 2002, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "2", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 58*100, // 价格（单位分）
            stock_num: 130, // 当前 sku 组合对应的库存
          },
           {
            id: 2003, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "3", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 158*100, // 价格（单位分）
            stock_num: 148, // 当前 sku 组合对应的库存
          },
           {
            id:2004, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "4", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 38*100, // 价格（单位分）
            stock_num: 130, // 当前 sku 组合对应的库存
          },
           {
            id:2005, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "5", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 38*100, // 价格（单位分）
            stock_num: 130, // 当前 sku 组合对应的库存
          },
          {
            id:2006, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "6", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 68*100, // 价格（单位分）
            stock_num: 130, // 当前 sku 组合对应的库存
          },

          {
            id: 1001, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 88*100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 1002, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "2", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 58*100, // 价格（单位分）
            stock_num: 130, // 当前 sku 组合对应的库存
          },
           {
            id: 1003, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "3", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 158*100, // 价格（单位分）
            stock_num: 148, // 当前 sku 组合对应的库存
          },
           {
            id: 1004, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "4", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 38*100, // 价格（单位分）
            stock_num: 130, // 当前 sku 组合对应的库存
          },
           {
            id: 1005, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "5", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 38*100, // 价格（单位分）
            stock_num: 130, // 当前 sku 组合对应的库存
          },
          {
            id: 1006, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "6", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 68*100, // 价格（单位分）
            stock_num: 130, // 当前 sku 组合对应的库存
          },
        ],
        price: "88.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id:1001, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        hide_stock: false, // 是否隐藏剩余库存
      },
    };
  },
  methods: {
    onBuyClicked() {
      console.log("购买");
    },
    onAddCartClicked() {
      console.log("加入购物车");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>